<template>
	<view class="page">
		<view class="tab">
			<image class="tab_img" @click="_tab(false)" :src="tab?'https://dcdn.it120.cc/haitangweiguang/ban1_ok.png':'https://dcdn.it120.cc/haitangweiguang/ban1.png'" mode="aspectFill"></image>
			<image class="tab_img" @click="_tab(true)" :src="tab?'https://dcdn.it120.cc/haitangweiguang/ban2_ok.png':'https://dcdn.it120.cc/haitangweiguang/ban2.png'" mode="aspectFill"></image>
		</view>
		
		
		<view class="box1" v-if="!tab">
			<view class="box_top">
				<view class="box_topt">
					<span>您的积分</span>
					<i>156</i>
				</view>
				<view class="box_topf box_topf1">
					<span>您的段位</span>
					<p><image class="tab_img" src="https://dcdn.it120.cc/haitangweiguang/x1.png" mode="aspectFill"></image><image class="tab_img" src="https://dcdn.it120.cc/haitangweiguang/x2.png" mode="aspectFill"></image><image class="tab_img" src="https://dcdn.it120.cc/haitangweiguang/x2.png" mode="aspectFill"></image></p>
				</view>
				<view class="box_topf">
					<span>您的排名</span>
					<i>第1536名</i>
				</view>
			</view>
			
			<view class="list">
				<view class="listb">
					<i>1</i>
					<image src="https://dcdn.it120.cc/haitangweiguang/tx.png" mode="aspectFill"></image>
					<span>竹林听雨</span>
					<em>9999分</em>
				</view>
				<view class="listb">
					<i>25</i>
					<image src="https://dcdn.it120.cc/haitangweiguang/tx.png" mode="aspectFill"></image>
					<span>竹林听雨竹林听雨竹林听雨竹林听雨</span>
					<em>9999分</em>
				</view>
				<view class="listb">
					<i>3</i>
					<image src="https://dcdn.it120.cc/haitangweiguang/tx.png" mode="aspectFill"></image>
					<span>竹林听雨</span>
					<em>9999分</em>
				</view>
			</view>
		</view>
		
		
		<view class="box2" v-else>
			<view class="box_top">
					<view class="box_topt">
						<span>您的积分</span>
						<i>1156</i>
					</view>
					<view class="box_topf box_topf1">
						<span>您的段位</span>
						<p><image class="tab_img" src="https://dcdn.it120.cc/haitangweiguang/x1.png" mode="aspectFill"></image><image class="tab_img" src="https://dcdn.it120.cc/haitangweiguang/x2.png" mode="aspectFill"></image><image class="tab_img" src="https://dcdn.it120.cc/haitangweiguang/x2.png" mode="aspectFill"></image></p>
					</view>
					<view class="box_topf">
						<span>您的排名</span>
						<i>第15136名</i>
					</view>
				</view>
				
				<view class="list">
					<view class="listb">
						<i>11</i>
						<image src="https://dcdn.it120.cc/haitangweiguang/tx.png" mode="aspectFill"></image>
						<span>竹林听雨</span>
						<em>9999分</em>
					</view>
					<view class="listb">
						<i>25</i>
						<image src="https://dcdn.it120.cc/haitangweiguang/tx.png" mode="aspectFill"></image>
						<span>竹林听雨竹林听雨竹林听雨竹林听雨</span>
						<em>9999分</em>
					</view>
					<view class="listb">
						<i>3</i>
						<image src="https://dcdn.it120.cc/haitangweiguang/tx.png" mode="aspectFill"></image>
						<span>竹林听雨</span>
						<em>9999分</em>
					</view>
				</view>
			
		</view>
		


		
	</view>

</template>

<script>
	export default {
		data() {
			return {
				tab: false
			}
		},
		created() {

		},
		mounted() {

		},
		onReady() {},
		onLoad(e) {},
		onShow() {

		},
		methods: {
			_tab(e){
				this.tab = e
			}
		}
	}
</script>
<style scoped lang="scss">
	.list{width: 626rpx; height: auto; margin: 30rpx 62rpx 50rpx; background: #fff;box-shadow: 0px 0px 12.75px 4.25px rgba(0, 0, 0, 0.08); border-radius: 15rpx; box-sizing: border-box; padding: 30rpx 20rpx 25rpx;}
	.listb{ width: 100%; height: 71rpx; display: block; margin: 0 0 25rpx; display: flex;}
	.listb i{ width: 70rpx;height: 71rpx; line-height: 71rpx; text-align: center;font-size: 58rpx; color: #3d3d3d; }
	.listb image{ width: 71rpx;height: 71rpx;border-radius: 100rpx; border: 2rpx solid #fff;}
	.listb span{ width: 220rpx;height: 71rpx; line-height: 71rpx; font-size: 38rpx; color: #303030; margin:0 25rpx;overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis; }
	.listb em{ width: 180rpx;height: 71rpx; line-height: 71rpx; font-size:44rpx; color: #303030; margin:0 0; overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;}
	
	.box_top{ width: 626rpx; height: auto; margin: 0 62rpx 0; background: #fff;box-shadow: 0px 0px 12.75px 4.25px rgba(0, 0, 0, 0.08); border-radius: 15rpx; box-sizing: border-box; padding: 0 20rpx 25rpx;}
	.box_topt{width: 100%; height: 100rpx; border-bottom: 2rpx solid #ba251e; display: flex; margin: 0 0 15rpx;}
	.box_topt span{ width: 350rpx; height: 100rpx; line-height: 100rpx; font-weight: bold; font-size: 52rpx; color: #2b2b2b;}
	.box_topt i{ width: 200rpx; height: 100rpx; line-height: 100rpx;font-size: 52rpx; color: #2b2b2b;}
	.box_topf span{width: 350rpx; height: auto;  font-weight: bold; font-size: 36rpx; color: #2b2b2b; line-height: 41rpx;}
	.box_topf{width: 100%; height: auto; margin: 15rpx 0 0; display: flex;}
	
	.box_topf p{width: 200rpx; height: auto; }
	.box_topf p image{width: 41rpx; height: 41rpx; margin: 0 10rpx 0 0;}
	
	.box_topf i{ width: 200rpx; height: auto; line-height: 41rpx;font-size: 36rpx; color: #2b2b2b;}
	.box_topf1{ margin-top: 30rpx;}
	
	.page {
		width: 100vw;
		min-height: 100vh;
		background-size: 100%;
		background-color: #ba251e;
		display: flex;
		flex-flow: wrap;
		align-content: flex-start;
	}

	.tab {
		width: 512rpx;
		height: 119rpx;
		margin: 30rpx 119rpx 10rpx;
		display: flex;
		justify-content: space-between;
		
	}
	
	.tab_img{
		width: 142rpx;
		height: 87rpx;
	}
	
</style>